import React, { useState } from 'react';
import * as echarts from 'echarts';
import { useEffect } from 'react';
import Pts from 'prop-types'
const Pie = (props) => {
  // console.log(props)
  useEffect(() => {
    var chartDom = document.getElementById(props.id);
    var myChart = echarts.init(chartDom);
    let options = {
      title: {
        text: props.title,
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      // legend: {
      //   orient: 'vertical',
      //   left: 'left'
      // },
      series: [
        {
          name: props.name,
          type: 'pie',
          radius: '50%',
          data: props.data,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    if (props.lengend) {
      options.legend = { orient: 'vertical', left: 'right' }
    }
    myChart.setOption(options)
  }, [])
  return (
    <div id={props.id} style={{ width: props.w, height: props.h }}>

    </div>
  );
}

// 设置参数限制
Pie.propTypes = {
  title: Pts.string.isRequired, // 主题
  data: Pts.array.isRequired, // 接收的数据
  lengend: Pts.bool.isRequired, // 是否展示图例
  name: Pts.string.isRequired
}

// 设置默认值
Pie.defaultProps = {
  w: '33.3%',
  h: '250px'
}

export default Pie;
